<template>
  <svg ref="svg1" id="svg1" :width="svg.width" :height="svg.height" style="border: 1px solid red" xmlns="http://www.w3.org/2000/svg">
     </svg>
<!--            <defs>
              &lt;!&ndash; 箭头 &ndash;&gt;
              <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
                <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;"/>
              </marker>
              <linearGradient id="line-gradient" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="#990000" stop-opacity="0" />
                <stop offset="1" stop-color="#990000" stop-opacity="1" />
              </linearGradient>
            </defs>-->

</template>

<script>
import {defineData2} from './define-data2'
import {draw} from '@/svgutil/svg-draw'


export default {
  name: "roof-test",
  data() {
    return {
      svg: {
        width: '100%',
        height: 600,
      },
      values: {
        'P001': {v: 1.23, w: 0},
        'P002': {v: 2.99, w: 1},
      },
      interval: {},
      scale: 1,
      scaleRange: [1,10],
      totalOffsetX: 0,
      totalOffsetY: 0,
      lastScale: {lastOffsetX: 0, lastOffsetY: 0,lastScale: 1},
    }
  },
  created() {

  },
  mounted() {
    this.drawSvg();
    //window.addEventListener("mousewheel", this.onStroll);
    document.getElementById('svg1').addEventListener('mousewheel',this.onStroll);
  },
  methods: {
    onStroll(e){
      if(e.deltaY > 0){
        if(this.scale < this.scaleRange[1]){
          this.scale += 0.125;
          this.totalOffsetX += e.offsetX - this.lastScale.lastOffsetX;
          this.totalOffsetY += e.offsetY - this.lastScale.lastOffsetY;

          this.drawSvg({scale: this.scale,offsetX: e.offsetX,offsetY:e.offsetY,...this.lastOffset,totalOffsetX: this.totalOffsetX,totalOffsetY: this.totalOffsetY});
          this.lastOffset = {lastOffsetX: e.offsetX,lastOffsetY:e.offsetY,lastScale: this.scale};
        }
      }else{
        if(this.scale > this.scaleRange[0]){
          this.scale -= 0.125;
          this.drawSvg({scale: this.scale,offsetX: e.offsetX,offsetY:e.offsetY,...this.lastOffset});
          this.lastOffset = {lastOffsetX: e.offsetX,lastOffsetY:e.offsetY,lastScale: this.scale};
        }
      }
    },
    drawSvg(scale) {
      draw("svg1", [defineData2(this.values, scale, this.callback)], this.values);
    },
    callback({event, name}) {
      console.log(event, name);
    },
    onClick(m) {
      console.log(typeof m);
      console.log('click');
    },
  }
}
</script>

<style scoped>
#svg1 {
  /*background: #2c3e50;*/
}

.line {
  fill: 'none';
}
</style>